// ==UserScript==
// @name         混合方块
// @namespace    https://gitee.com/yiyuzi/youhou/tree/master/
// @version      0.1
// @description  摸鱼鱼鱼
// @author       一语子
// @include      *
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @match        http://*/*
// @icon         
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

'use strict';
console.log("混合方块 start");

// 10*10的棋盘
var chessboard;
// 棋子种类
var chessType;
// 棋子种类数量
var chessTypeNum = 0;
// 当前选中的棋子
var chessFloat;
// 分数
var chessScore = 0;

chessInit();

// 初始化棋盘样式
function chessInit(){
    chessboard = new Array(10).fill('');
    chessboard = chessboard.map((ele)=>new Array(10).fill(false));
    chessType = new Array(15).fill('');
    chessType = chessType.map((ele)=>new Array(4).fill(''));
    chessTypeInit();

    let _html = `<div id="chessGame"><div id='chessboard'>`;
    for (let i = 0; i < 10; i++){
        for (let j = 0; j < 10; j++){
            _html += `<div class="chessCell" id="${"chessCell"+i+j}"></div>`;
        }
    }
    _html += `</div><div id="chessWaitSelectBoard">`
    for (let i = 0; i < 3; i++){
        _html += `<div class="chessWaitSelect" id="${"chessWaitSelect"+i}"></div>`;
    }
    _html += `<div id="chessScore">${chessScore}</div></div></div><style>
    #chessGame {
    z-index: 2000;
    position: fixed;
    top: 10%;
    left: 10%;
    }
    #chessGame div{
    border-radius: 5px;
    }
    #chessboard {
    display: grid;
    /* 划分行列 */
    grid-template-rows: repeat(10,20px);
    grid-template-columns: repeat(10,20px);
	}
    .chessCell {
    background: #fff;
    box-shadow: 0px 0px 3px 3px rgba(135,206,250, .2);
    height: 15px;
    width: 15px;
    }
    #chessWaitSelectBoard {
    display: grid;
    grid-template-rows: repeat(1,50px);
    grid-template-columns: repeat(4,50px);
    }
    .chessWaitSelect {
    background: #fff;
    box-shadow: 0px 0px 3px 3px rgba(135,206,250, .2);
    height: 40px;
    width: 40px;
    }
    #chessScore {
    background: #fff;
    box-shadow: 0px 0px 3px 3px rgba(135,206,250, .2);
    height: 40px;
    width: auto;
    }
    </style>`;
    document.body.insertAdjacentHTML('beforeend', _html);
    createChess()
}

// 初始化棋子类型
function chessTypeInit() {
	chessType[chessTypeNum++][0] = [[true]];
    chessType[chessTypeNum++][0] = [[true, true]];
    chessType[chessTypeNum++][0] = [[true, true, true]];
    chessType[chessTypeNum++][0] = [[true, true, true, true]];
    chessType[chessTypeNum++][0] = [[true, true, true, true, true]];
    chessType[chessTypeNum++][0] = [[true, true],
                                    [true, true]];
    chessType[chessTypeNum++][0] = [[true, true],
                                    [true, false]];
    chessType[chessTypeNum++][0] = [[false, true, true],
                                    [true, true, false]];
    chessType[chessTypeNum++][0] = [[true, true, false],
                                    [false, true, true]];
    chessType[chessTypeNum++][0] = [[true, true, true, true],
                                    [true, false, false, false]];
    chessType[chessTypeNum++][0] = [[true, true, true, true],
                                    [false, false, false, true]];
    chessType[chessTypeNum++][0] = [[true, true, true],
                                    [true, false, true],
                                    [true, false, true]];

	let temp = new Array(5).fill('');
    temp = temp.map((ele)=>new Array(4));
    // chessTypeNum种形状
	for (let shape = 0; shape < chessTypeNum; shape++) {
        // 顺时针旋转
		for (let form = 0; form < 3; form++) {
			// 获取第form种形态，深拷贝数组
			temp = JSON.parse(JSON.stringify(chessType[shape][form]));
            let row = temp.length;
            let col = temp[0].length;
            chessType[shape][form + 1] = new Array(col).fill('');
            chessType[shape][form + 1] = chessType[shape][form + 1].map((ele)=>new Array(row));
			for (let i = 0; i < row; i++) {
				for (let j = 0; j < col; j++) {
					chessType[shape][form + 1][col - 1 - j][i] = temp[i][j];
				}
			}
		}
	}
}

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

function createChess(){
    for (let k = 0; k < 3; k++){
        let chess = chessType[getRndInteger(0, chessTypeNum)][getRndInteger(0, 4)];
        let row = chess.length;
        let col = chess[0].length;
        let _html = `<div id="${"chessFall"+k}">`;
        for(let i = 0; i < row; i++){
            for(let j = 0; j < col; j++){
                _html += `<div id="${"chessSelect"+k+i+j}" style="${chess[i][j] ? "background: #00BFFF" : "opacity: 0%"}"></div>`;
            }
        }
        _html += `<style>#${"chessFall"+k} {display: grid;grid-template-rows: repeat(${row},15px);grid-template-columns: repeat(${col},15px);}</style></div>`;
        document.getElementById("chessWaitSelect"+k).insertAdjacentHTML('beforeend', _html);
        suspensionChess("chessFall"+k);
    }
}

function suspensionChess(dragId) {
    var startEvt, moveEvt, endEvt;
    // 判断是否支持触摸事件
    if ('ontouchstart' in window) {
        startEvt = 'touchstart';
        moveEvt = 'touchmove';
        endEvt = 'touchend';
    } else {
        startEvt = 'mousedown';
        moveEvt = 'mousemove';
        endEvt = 'mouseup';
    }
    // 获取元素
    var drag = document.getElementById(dragId);
    // 标记是拖曳还是点击
    var isClick = true;
    // 标记位置
    var disX, disY, left, top, starX, starY;

    drag.addEventListener(startEvt, startFun);

    function startFun(e) {
        // 创建临时样式
        let _html = `<style id='tempStyle'>
        #${dragId} {
        position: fixed;
        }
        </style>`;
        document.body.insertAdjacentHTML('beforeend', _html);
        // 阻止页面的滚动，缩放
        e.preventDefault();
        // 兼容IE浏览器
        e = e || window.event;
        isClick = true;
        // 按下时的坐标
        starX = e.touches ? e.touches[0].clientX : e.clientX;
        starY = e.touches ? e.touches[0].clientY : e.clientY;
        // 相对于拖动元素左上角的位置
        disX = starX - drag.offsetLeft;
        disY = starY - drag.offsetTop;
        starX = drag.offsetLeft;
        starY = drag.offsetTop;
        // 按下之后才监听后续事件
        document.addEventListener(moveEvt, moveFun);
        document.addEventListener(endEvt, endFun);
    }

    function moveFun(e) {
        // 兼容IE浏览器
        e = e || window.event;
        isClick = false;
        left = (e.touches ? e.touches[0].clientX : e.clientX) - disX;
        top = (e.touches ? e.touches[0].clientY : e.clientY) - disY;
        // 限制拖拽的X范围，不能拖出屏幕
        if (left < 0) {
            left = 0;
        } else if (left > document.documentElement.clientWidth - drag.offsetWidth) {
            left = document.documentElement.clientWidth - drag.offsetWidth;
        }
        // 限制拖拽的Y范围，不能拖出屏幕
        if (top < 0) {
            top = 0;
        } else if (top > document.documentElement.clientHeight - drag.offsetHeight) {
            top = document.documentElement.clientHeight - drag.offsetHeight;
        }
        drag.style.left = left + 'px';
        drag.style.top = top + 'px';
    }

    function endFun(e) {
        document.removeEventListener(moveEvt, moveFun);
        document.removeEventListener(endEvt, endFun);
        // 删除临时样式，将方块放置到棋盘上或移回原位
        $("#tempStyle").remove();
        drag.style.left = starX + 'px';
        drag.style.top = starY + 'px';
    }
}
